<template>
  <view class="container">
    <view class="build-info">
      <view class="address-name">{{ bName }}</view>
      <view class="collected-house">
        {{ roomName }}
      </view>
    </view>

    <div class="rental-info card">
      <div class="common-row">
        <div class="label">出租方:</div>
        <div class="value">{{ detail.hostName }}</div>
      </div>

      <div class="common-row">
        <div class="label">承租方:</div>
        <div class="value">
          {{ checkArray(detail.name) ? detail.name.join("、") : detail.name }}
        </div>
      </div>
    </div>

    <div class="rental-info card">
      <div class="common-row">
        <div class="label">租房时间:</div>
        <div class="value">
          {{ deal_time(detail.beginTime) }}
          -
          {{ deal_time(detail.endTime) }}
        </div>
      </div>

      <div class="common-row">
        <div class="label">房屋租期:</div>
        <div class="value">{{ detail.leaseTerm }}个月</div>
      </div>

      <div class="common-row">
        <div class="label">房租金额:</div>
        <div class="value">{{ detail.rentalRent }}元/月</div>
      </div>

      <div class="common-row">
        <div class="label">租房用途:</div>
        <div class="value">{{ detail.rentUse }}</div>
      </div>

      <div class="common-row" v-if="detail.rentContractType != 1">
        <div class="label">租房合同:</div>
        <div class="value" v-if="detail.rentContractType == 0">
          {{ get_dict_type(rent_contract_type, detail.rentContractType) }}
        </div>

        <div class="value click" v-if="detail.rentContractType == 2" @click="handleClickRouter"
          :data-url="`/rentalHousing/electronic_contract?contractId=${detail.id}&type=rental`">
          查看电子合同
        </div>
      </div>

      <div class="common-row" v-if="detail.rentContractType == 1">
        <div class="label" style="margin: 20rpx 0">租房合同:</div>
      </div>
      <view class="image-warpper-s">
        <image class="img-contract" v-for="item in detail.rentContractImg"
          v-if="detail.rentContractType == 1 && detail.rentContractImg.length > 0" :src="imgPrefix + item"></image>
      </view>
      <div class="common-row" v-if="type != '租房'">
        <div class="label">退租时间:</div>
        <div class="value">{{ deal_time(detail.updateTime) }}</div>
      </div>
    </div>

    <view class="btns thispageBtn" v-if="type == '租房'">
      <view class="common-btn" @click="handleClickRouter" :data-url="`/rentalHousing/renew_the_lease?rentContractId=${
          detail.id
        }`">
        <u-icon name="hourglass"></u-icon>
        <view>续租</view>
      </view>
      <view class="common-btn">
        <u-icon name="minus-people-fill" @click="quit"></u-icon>
        <view>退租</view>
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    Toast,
    navBack,
    handleClickRouter
  } from "@/utils/util.js";
  import {
    getAction,
    postAction
  } from "@/utils/request.js";
  export default {
    data() {
      return {
        type: "",
        bName: "",
        roomName: "",
        detail: {},
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        rent_contract_type: [{
            title: "无租房合同",
            value: "0"
          },
          {
            title: "上传合同图片",
            value: "1"
          },
          {
            title: "在线签署电子版合同",
            value: "2"
          },
        ],
      };
    },
    onLoad(options) {
      this.bName = options.bName;
      this.roomName = options.roomName;
      this.detail = JSON.parse(options.item);

      if (this.detail.rentContractImage && this.detail.rentContractImage.length > 0) {
        if (this.detail.rentContractImage.indexOf(",") > -1) {
          this.detail.rentContractImg = this.detail.rentContractImage.split(",");
        } else {
          this.detail.rentContractImg = [this.detail.rentContractImage];
        }
      }
      console.log(options.type)
      this.type = options.type;

      uni.$on("add_rental_info_success", (e) => {
        navBack();
      });
    },
    onUnload() {
      uni.$off("add_rental_info_success");
    },
    onShow() {},
    methods: {
      handleClickRouter,
      get_dict_type(list, type) {
        let res = list.find((item) => item.value == type);
        if (res && res.title) {
          return res.title;
        } else {
          return "暂无";
        }
      },
      // async get_details(contractId) {
      //   let res = await getAction("/rentinghouse/contractDetails", {
      //     contractId,
      //   });
      //   this.detail = res.result;
      //   console.log("res", res);
      // },

      deal_time(dateString) {
        if (dateString !== undefined && dateString !== null) {
          return dateString.split(" ")[0];
        } else {
          return "暂无";
        }
      },

      checkArray(variable) {
        return Array.isArray(variable);
      },

      quit() {
        uni.showModal({
          title: "退租",
          content: "退租后不可恢复，请谨慎操作！",
          confirmColor: "#2488F5",
          success: async (res) => {
            if (res.confirm) {
              let res = await getAction("/rentinghouse/contractTermination", {
                contractId: this.detail.id,
              });
              Toast(res.message);
              navBack();
              uni.$emit("add_rental_info_success");
            }
          },
        });
      },
    },
  };
</script>

<style scoped lang="scss">
  .container {
    padding: 16rpx 16rpx 0 16rpx;
    background: #f9f9f9;

    display: flex;
    flex-direction: column;
    padding-bottom: 96rpx;

    .build-info {
      width: 718rpx;
      height: 216rpx;
      background: linear-gradient(89deg, #51b1ff 0%, #1790f2 100%);
      border-radius: 8rpx;
      padding: 42rpx 35rpx;

      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .address-name {
        font-weight: bold;
        font-size: 36rpx;
        color: #fafafa;
      }

      .collected-house {
        font-weight: 500;
        font-size: 28rpx;
        color: #fafafa;
      }
    }

    .card {
      margin: 20rpx 0;
      padding: 0 30rpx;
      background: #ffffff;
      border-radius: 26rpx;
    }

    .common-row {
      padding: 20rpx 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #ebebeb;

      &:last-of-type {
        border-bottom: none;
      }
    }

    .label {
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
    }

    .value {
      font-weight: bold;
      font-size: 28rpx;
      color: #333333;
    }

    .click {
      color: #2488f5;
    }

    .image-warpper-s {
      .img-contract {
        width: 210rpx;
        height: 180rpx;
        border-radius: 16rpx;
        margin-right: 12rpx;

        &:nth-child(3n+ 0) {
          margin-right: 0rpx;
        }
      }
    }



    .common-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: 96rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 26rpx;
      color: #000000;
      padding-top: 26rpx;
      padding-bottom: 12rpx;

      &:nth-of-type(1) {
        border-right: 1rpx solid #d8d8d8;
      }
    }

    .thispageBtn {
      position: fixed;
      width: 100vw;
      bottom: 0;
      left: 0;
      padding: 0 !important;
    }
  }
</style>